<template>
  <div id="right" class="right" :style="{ right: isShow ? '0px' : '-390px' }">
    <div class="right-box">
      <div class="big-tit">
        <!-- <img src="@/assets/tit-right-bg.png" /> -->
        <div style="top: 4px; left: 20px; font-weight: bold">危防统计</div>
      </div>
      <div class="big-content">
        <div style="width: 100%; height: 25%; margin-bottom: 15px">
          <div class="tit">
            <div style="width: 3px; color: #226dc4; background-color: #226dc4">
              &nbsp;
            </div>
            <div class="tit-name">岸电使用情况</div>
            <!-- <el-select
              v-model="code"
              placeholder="请选择"
              size="mini"
              style="margin-top: 2px"
              @change="changeHandle"
            >
              <el-option
                v-for="item in hasList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select> -->
          </div>
          <div style="margin-top: 10px" class="title">
            <button
              v-for="(item, index) in chartBtn"
              :key="index"
              @click="showWaitList(index)"
              class="btnStyle"
              :class="{ btnActive: activeTab === index }"
            >
              {{ item }}
            </button>
          </div>
          <div
            class="content"
            style="
              display: flex;
              justify-content: center;
              align-items: center;
              width: 99%;
              height: 98%;
            "
          >
            <div
              style="
                width: 100%;
                height: 100%;
                display: flex;
                padding-left: 10px;
                align-items: center;
                justify-content: center;
              "
              ref="shorePower"
            ></div>
          </div>
        </div>
        <div
          style="
            width: 100%;
            height: 25%;
            margin-bottom: 11px;
            margin-top: 20px;
          "
        >
          <div class="tit">
            <div style="width: 3px; color: #226dc4; background-color: #226dc4">
              &nbsp;
            </div>
            <div class="tit-name">洗舱量</div>
            <el-select
              v-model="selectMonth"
              placeholder="请选择"
              size="mini"
              style="margin-top: 2px"
              @change="washData"
            >
              <el-option
                v-for="item in monthList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="content" style="height: 90%; overflow-y: scroll">
            <div v-for="item in washCountList">
              <div style="padding: 0 5px; margin-top: 1px">
                <div style="font-size: 15px; position: relative">
                  <span>{{ item.name }}</span>
                  <span style="position: absolute; right: 0">
                    <span
                      style="color: #2bfbfd; font-weight: bold; font-size: 15px"
                      >{{ item.count }}</span
                    >艘
                  </span>
                </div>
                <el-progress
                  style="margin-top: 10px"
                  :show-text="false"
                  :percentage="item.rate"
                ></el-progress>
              </div>
            </div>
          </div>
        </div>
        <div
          style="
            width: 100%;
            height: 17%;
            margin-bottom: 11px;
            margin-top: 20px;
          "
        >
          <div class="tit">
            <div style="width: 3px; color: #226dc4; background-color: #226dc4">
              &nbsp;
            </div>
            <div class="tit-name">船载智能CCTV告警总数</div>
          </div>
          <div
            style="
              width: 100%;
              height: 100%;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
            "
          >
            <div class="sum_content">
              <div style="flex: 1; display: flex">
                <img
                  style="text-align: center; margin-top: 20px; margin-left: 5px"
                  height="38"
                  width="36"
                  src="@/assets/alarm_sum.png"
                />
                <div style="margin-left: 10px; margin-top: 20px; float: left">
                  <div style="font-size: 15px" ref="alarmSum">2269</div>
                  <div style="font-size: 15px; color: #e1e1e1; margin-top: 5px">
                    告警总数
                  </div>
                </div>
              </div>
              <div style="flex: 1">
                <div style="flex: 1; display: flex">
                  <img
                    style="
                      text-align: center;
                      margin-top: 5px;
                      margin-left: 5px;
                    "
                    height="25"
                    width="25"
                    src="@/assets/alarm_handle.png"
                  />
                  <div style="margin-left: 10px; float: left">
                    <div style="font-size: 15px" ref="handleAlarm">2106</div>
                    <div
                      style="font-size: 15px; color: #e1e1e1; margin-top: 5px"
                    >
                      已处置告警
                    </div>
                  </div>
                </div>
                <div style="flex: 1; display: flex; margin-top: 10px">
                  <img
                    style="
                      text-align: center;
                      margin-top: 5px;
                      margin-left: 5px;
                    "
                    height="25"
                    width="25"
                    src="@/assets/alarm_unhandle.png"
                  />
                  <div style="margin-left: 10px; float: left">
                    <div style="font-size: 15px" ref="unhandleAlarm">163</div>
                    <div
                      style="font-size:15px; color: #e1e1e1; margin-top: 5px"
                    >
                      未处置告警
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          style="
            width: 100%;
            height: 17%;
            margin-bottom: 11px;
            margin-top: 20px;
          "
        >
          <div class="tit">
            <div style="width: 3px; color: #226dc4; background-color: #226dc4">
              &nbsp;
            </div>
            <div class="tit-name">船载智能CCTV告警分类</div>
          </div>
          <div
            class="content"
            style="
              display: flex;
              justify-content: center;
              align-items: center;
              flex-direction: column;
            "
          >
            <div style="width: 99%; height: 100px" ref="alarmType"></div>
          </div>
        </div>
      </div>
    </div>
    <div id="showButton" class="showButton" @click="toggleLeftPanel">
      {{ isShow ? "关闭" : "展开" }}
    </div>
  </div>
</template>
<script>
import { orgList, getOught, capacity } from "../api/work";
import { getAlarm, getType } from "../api/alarm";
import tool from "@/utils/tool";
export default {
  name: "right",
  data() {
    return {
      yAxisMax:300,
      inter: null, //定时器
      setInter:null,//页面刷新数据
      code: null,
      isShow: true,
      selectHas: "",
      hasList: [
        { label: "芜湖海事局", value: "10011017" },
        { label: "重庆海事局", value: "10011002" },
        { label: "安庆海事局", value: "10011012" },
        // { label: "三峡海事局", value: "127" },
        // { label: "宜昌海事局", value: "128" },
        // { label: "泸州海事局", value: "129" },
        // { label: "荆州海事局", value: "131" },
        // { label: "岳阳海事局", value: "132" },
        // { label: "宣宾海事局", value: "164" },
        // { label: "黄石海事局", value: "191" },
        // { label: "九江海事局", value: "197" },
        // { label: "武汉海事局", value: "276" },
      ],
      shorePowerChart: null,
      alarmTypeChart: null,
      selectMonth: "",
      monthList: [],
      washCountList: [],
      activeTab: 0,
      chartBtn: ["应用尽用率", "用电时长", "用电艘次", "用电度数"],
      // 应用尽用率数据
      OughtData: [],
      // 用电数据
      apiData: [],

      chartOptions: {
        grid: {
          left:0,
          x: 30,
          x2: 40,
          y: 20,
          right:0,
          bottom:50,
          containLabel:true
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: [
          {
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
            axisLabel: {
              textStyle: { color: "#c9c9c9" },
              // interval: 0
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            show:true,
            min: 0,
            max: 100,
            interval: 25,
            splitNumber: 6, // 设置坐标轴的分割段数
            axisLabel: {
              show: true,
              interval: "auto",
              formatter: "{value}%",
              textStyle: { color: "#c9c9c9" },
              // textStyle: { color: "#c9c9c9" },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              // 网格线
              show: true,
            },
          },
          {
            type: "value",
            show:false,
            axisLabel: {
              show: true,
              interval: "auto",
              formatter: "{value}%",
              textStyle: { color: "#c9c9c9" },
            },
            // axisLabel: {
            //   show: false,
            //   textStyle: { color: "#c9c9c9" },
            // },
            splitLine: {
              lineStyle: {
                color: "#164a73", // 改变折线颜色
              },
            },
            min: 0,
            max: 100,
            interval: 25,
            splitNumber: 6, // 设置坐标轴的分割段数
          },
        ],
        // legend: {
        //   orient: "horizontal",
        //   bottom: 10,
        //   left: 0,
        //   data: ["应用尽用率", "用电时长", "用电艘次", "用电度数"],
        //   textStyle: {
        //     color: "#ffffff",
        //     fontSize: 11,
        //   },
        // },
        series: [
          {
            type: "line",
            showSymbol: false,
            name: "应用尽用率",
            tooltip: {
              valueFormatter: function (value) {
                return value + "%";
              },
            },
            yAxisIndex: 1,
            data: [],
            smooth: true,
            itemStyle: {
              normal: {
                color: "#5ff62c", // 改变折线点的颜色
                lineStyle: {
                  color: "#5ff62c", // 改变折线颜色
                },
              },
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#9de385", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "transparent", // 100% 处的颜色
                  },
                ]), // 背景渐变色
              },
            },
          },
          {
            axisLabel: {
              show: true,
              textStyle: {
                color: "#234e75",
              },
            },
            type: "line",
            tooltip: {
              valueFormatter: function (value) {
                return value + "万/小时";
              },
            },
            showSymbol: false,
            name: "用电时长",
            data: [],
            // data: [230, 269, 300, 330, 310, 344, 355, 341, 325, 412, 500, 300],
            smooth: true,
            itemStyle: {
              normal: {
                color: "#f65c2c", // 改变折线点的颜色
                lineStyle: {
                  color: "#f65c2c", // 改变折线颜色
                },
              },
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#de8e75", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "transparent", // 100% 处的颜色
                  },
                ]), // 背景渐变色
              },
            },
          },
          {
            type: "line",
            showSymbol: false,
            name: "用电艘次",
            tooltip: {
              valueFormatter: function (value) {
                return value + "万/次";
              },
            },
            data: [],
            // data: [323, 352, 445, 455, 433, 411, 393, 450, 489, 532, 555, 529],
            smooth: true,
            itemStyle: {
              normal: {
                color: "#1c69fe", // 改变折线点的颜色
                lineStyle: {
                  color: "#1c69fe", // 改变折线颜色
                },
              },
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#537fd3", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "transparent", // 100% 处的颜色
                  },
                ]), // 背景渐变色
              },
            },
          },
          {
            type: "line",
            showSymbol: false,
            name: "用电度数",
            tooltip: {
              valueFormatter: function (value) {
                return value + "万/度";
              },
            },
            data: [],
            // data: [456, 436, 428, 392, 372, 349, 322, 310, 300, 234, 232, 300],
            smooth: true,
            itemStyle: {
              normal: {
                color: "#cd2bf7", // 改变折线点的颜色
                lineStyle: {
                  color: "#cd2bf7", // 改变折线颜色
                },
              },
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#e080f8", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "transparent", // 100% 处的颜色
                  },
                ]), // 背景渐变色
              },
            },
          },
        ],
      },
    };
  },
  computed: {},
  destroyed() {
    clearInterval(this.inter);
    this.inter = null;
    clearInterval(this.setInter);
    this.setInter = null;
  },
  created() {
    // localStorage.setItem('ORGCODE',this.hasList[0].value)
    // // this.selectHas = this.hasList[0].value;
    // // this.selectHas=localStorage.getItem('depOrg')
    // // 判断本地存储的deporg是否有变化 有变化则改变
  },
  mounted() {
    console.log(2222222,this.yAxisMax)
    this.selectHas = tool.data.get("ORGCODE");
    this.drawShorePowerChart();
    this.drawAlarmType();
    // 月份
    this.initializeMonthList();
    // 洗舱
    this.washData();
    // 告警总数
    this.getAlarmSum();
    // 岸电使用情况
    this.fetchData();
    this.inter = setInterval(() => {
      let code = tool.data.get("ORGCODE");
      if (this.selectHas != code) {
        this.selectHas = code;
        this.fetchData(); //重新调用
            // 洗舱
        // this.washData();
      }
    }, 150);
        // 五分钟刷数据
        this.setInter = setInterval(() => {
      console.log('定时器')
        this.getdelivery();
        this.drawAlarmType();
        this.showWaitList();
        this.showBlacklist();
        this.showCList();
        // this.activeTab = "waitList";
    }, 30*10000);
    if (window.microApp) {
      microApp.getGlobalData("PUBLIC_METHODS").changeWidth(true, "right", 390);
      // window.microApp.setGlobalData({renderBoardWfglRight})
    }
  },
  methods: {
    // changeHandle() {
    //   localStorage.setItem("ORGCODE", this.code);
    // },
    // 注册调用方法
    renderBoardWfglRight() {
      this.selectHas = tool.data.get("ORGCODE");
      this.fetchData();
    },
    getAlarmSum() {
      // let res=await getAlarm()
      // this.$refs.alarmSum.innerHTML=res.totalAlarmCount
      // this.$refs.handleAlarm.innerHTML=res.handledAlarmCount
      // this.$refs.unhandleAlarm.innerHTML=res.unhandledAlarmCount
      // this.$refs.alarmSum.innerHTML='20'
      // this.$refs.handleAlarm.innerHTML='10'
      // this.$refs.unhandleAlarm.innerHTML='123'
    },
    drawShorePowerChart() {
      this.shorePowerChart = this.$echarts.init(this.$refs.shorePower);

      this.shorePowerChart.setOption(this.chartOptions);
    },
    // 告警总类
    async drawAlarmType() {
      this.alarmTypeChart = this.$echarts.init(this.$refs.alarmType);
      // 告警总数
      // let res=await getType()
      // console.log(res,'告警总类')
      const option = {
        title: {
          text: "",
          subtext: "2269",
          x: "73%",
          y: "28%",
          subtextStyle: {
            fontSize: 16,
            lineHeight: 15,
            fontWeight: 600,
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          // 图例
          itemHeight: 15,
          data: [
            "未穿救生衣",
            "玩手机",
            "救生衣、工作服未穿",
            "未戴安全帽、未穿救生衣与工作衣",
          ],
          orient: "vertical",
          x: "left", //可设定图例在左、右、居中
          y: "center", //可设定图例在上、下、居中
          padding: [0, 50, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
          textStyle: {
            //图例文字的样式
            color: "#ccc",
            fontSize: 13,
          },
        },
        series: [
          {
            radius: ["50%", "80%"],
            center: ["80%", "50%"],
            type: "pie",
            label: {
              show: false,
              // 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等.
              // normal: {
              //   show: false, // 是否显示标签[ default: false ]
              //   position: "inside", // 标签的位置。'outside'饼图扇区外侧，通过视觉引导线连到相应的扇区。'inside','inner' 同 'inside',饼图扇区内部。'center'在饼图中心位置。
              //   // formatter: "{b} : {c}", // 标签内容
              //   formatter: function (params) {
              //     // 如果名称为"未戴安全帽、未穿救生衣与工作衣"，则添加换行符
              //     if (params.name === "未戴安全帽、未穿救生衣与工作衣") {
              //       return params.name.replace("、", "、\n") + params.value;
              //     } else {
              //       // 如果名称不是上述情况，则返回原始格式
              //       return params.name + params.value;
              //     }
              //   },
              //   backgroundColor: "black",
              //   padding: [3, 5],
              //   offsetCenter: [0, "30%"],
              //   textStyle: {
              //     //图例文字的样式
              //     color: "#fff",
              //     fontSize: 12,
              //   },
              // },
            },
            data: [
              {
                value: 643,
                name: "未穿救生衣",
              },
              {
                value: 492,
                name: "玩手机",
              },
              {
                value: 1032,
                name: "救生衣、工作服未穿",
              },
              {
                value: 102,
                name: "未戴安全帽、未穿救生衣与工作衣",
              },
            ],
          },
        ],
      };
      this.alarmTypeChart.setOption(option);
    },
    toggleLeftPanel() {
      this.isShow = !this.isShow;
      microApp
        .getGlobalData("PUBLIC_METHODS")
        .changeWidth(this.isShow, "right", 390);
    },
    // 点击按钮进行切换
    showWaitList(index) {
      this.activeTab = index;
      switch (index) {
        case 0:
          /* 应用尽用率对应的数据 */
          this.chartOptions.yAxis[0].max=100
          this.chartOptions.yAxis[0].interval=25

          this.chartOptions.yAxis[0].axisLabel={
            show: true,
              interval: "auto",
              formatter: "{value}%",
              textStyle: { color: "#c9c9c9" },
        }
          this.clearChartDataExcept(0);
          this.chartOptions.series[0].data = this.OughtData.map(
            (item) => item.value
          );
          break;
        case 1:
        this.chartOptions.yAxis[0].max=300
        this.chartOptions.yAxis[0].axisLabel={
        }
        this.chartOptions.yAxis[0].axisLabel={
          show:true,
          formatter: "{value}",
          textStyle: { color: "#c9c9c9" },
        }

        this.chartOptions.yAxis[0].interval=100
          this.clearChartDataExcept(1);
          this.chartOptions.series[1].data = this.apiData.map(
            (item) => item.powerTime
          );
          break;
        case 2:
        // this.yAxisMax=100;
        this.chartOptions.yAxis[0].axisLabel={
          show:true,
          formatter: "{value}",
          textStyle: { color: "#c9c9c9" },
        }
        this.chartOptions.yAxis[0].max=30
        this.chartOptions.yAxis[0].interval=10
          this.clearChartDataExcept(2);
          this.chartOptions.series[2].data = this.apiData.map(
            (item) => item.shipCount
          );
          break;
        case 3:
        this.chartOptions.yAxis[0].axisLabel={
          show:true,
          formatter: "{value}",
          textStyle: { color: "#c9c9c9" },
        }
        this.chartOptions.yAxis[0].max=900
        this.chartOptions.yAxis[0].interval=150
          this.clearChartDataExcept(3);
          this.chartOptions.series[3].data = this.apiData.map(
            (item) => item.powerSum
          );
          break;
      }
      this.shorePowerChart.setOption(this.chartOptions);
    },
    // 每次切换之前先清空当前的数据
    clearChartDataExcept(index) {
      for (let i = 0; i < this.chartOptions.series.length; i++) {
        if (i !== index) {
          this.chartOptions.series[i].data = [];
        }
      }
    },
    //应用尽用率
    getOughtData() {
      getOught({
        // departNo: "1001",
        departNo: this.selectHas,
      }).then((res) => {
        this.OughtData = res;
      });
    },

    // 切换按钮
    fetchData() {
      //应用尽用率
      this.getOughtData();
      // 岸电使用情况
      orgList({
        // departNo: "1001",
        departNo: this.selectHas,
      }).then((res) => {
        this.apiData = res;
        this.showWaitList(this.activeTab);
      });
    },
    // 获取月份
    initializeMonthList() {
      const currentMonth = new Date().getMonth() + 1;
      this.selectMonth = currentMonth;
      const months = [
        { name: "一月", value: "1" },
        { name: "二月", value: "2" },
        { name: "三月", value: "3" },
        { name: "四月", value: "4" },
        { name: "五月", value: "5" },
        { name: "六月", value: "6" },
        { name: "七月", value: "7" },
        { name: "八月", value: "8" },
        { name: "九月", value: "9" },
        { name: "十月", value: "10" },
        { name: "十一月", value: "11" },
        { name: "十二月", value: "12" },
      ];
      this.monthList = months.map((month, index) => {
        if (index + 1 === currentMonth) {
          return { label: "本月", value: currentMonth };
        }
        return { label: month.name, value: month.value };
      });
    },
    // 洗舱
    washData() {
      capacity({ month: this.selectMonth }).then((res) => {
        console.log("洗舱量", res);
        this.washCountList = res.count.map((countItem, index) => {
          let name = res.type[index];
          let rate = countItem;
          return { name, count: countItem, rate };
        });
      });
    },
  },
};
</script>

<style scoped>
.right {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  width: 390px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #132054;
  padding: 5px 0;
  transition: right 0.3s ease-in-out;
}
.right-box {
  background-color: #132054;
  color: white;
  /* padding-top: 10px; */
  border-radius: 10px;
  /* margin: auto; */
  margin: 8px auto;
  border: 2px solid #5592be;
  width: 375px;
  height: 98%;
  /* display: flex; */
  /* justify-content: center;
  align-items: center; */
  /* height: calc(100% - 40px); */
}
.right-box .big-tit {
  font-family: PingFang SC;
  font-size: 16px;
  font-weight: 400;
  height: 22px;
  padding-left: 10px;
  width: 97%;
  line-height: 22.4px;
  letter-spacing: 0.03em;
  text-align: left;
  background-image: url("../assets/tit-bg.png");

  /* position: relative; */
}

.right-box .big-content {
  padding: 10px;
  /* display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; */
  width: 95%;
  height: 95%;
}
.tit-name {
  font-weight: bold;
  margin-left: 5px;
  background: linear-gradient(to right, #226dc4, #132054);
  font-size: 16px;
  line-height: 30px;
  padding: 0 10px;
  width: 300px;
  height: 30px;
}
.content {
  width: 100%;
  height: 100%;
  margin-top: 3px;
}
.big-content .tit {
  height: 30px;
  display: flex;
}
.sum_content {
  display: flex;

  align-items: center;
  /* margin-top: 5px; */
  padding: 10px;
  margin: 10px 0;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    rgba(60, 149, 255, 0.15) 0%,
    rgba(60, 149, 255, 0.0345) 100%
  );
  width: 327px;
  height: 87%;
}
.showButton {
  height: 50px;
  width: 25px;
  background: linear-gradient(
    90deg,
    rgba(130, 209, 246, 1) 0%,
    rgba(41, 182, 244, 1) 50%,
    rgba(0, 137, 205, 1) 99%
  );
  text-align: center;
  writing-mode: vertical-rl;
  line-height: 25px;
  position: absolute;
  left: -25px;
  top: 48%;
  color: #ffffff;
  font-size: 14px;
  cursor: pointer;
  border-radius: 5px 0 0 5px;
}
.title {
  display: flex;
  justify-content: flex-start;
}
.btnStyle {
  background-color: transparent;
  border: none;
  padding: 0;
  color: #fff;
  margin-right: 10px;
  font-size: 15px;
}

.btnActive {
  background: linear-gradient(
    90deg,
    rgba(130, 209, 246, 1) 0%,
    rgba(41, 182, 244, 1) 50%,
    rgba(0, 137, 205, 1) 99%
  );
  border-radius: 5px;
  color: #fff;
  padding: 5px;
  margin-right: 10px;
}
</style>

<style>
.el-input--mini .el-input__inner {
  height: 25px;
  line-height: 25px;
  background: #2c407a;
}
.el-input--mini .el-input__icon {
  line-height: 25px;
}
::-webkit-scrollbar {
  /* display: none; */
}
</style>
